<template>
  <div>
    <a-card title="免修申请处理" :bordered="false">
      <a-tabs defaultActiveKey="1">
        <a-tab-pane tab="待审核" key="1">
          <a-table
            :columns="columns"
            :dataSource="pendingData"
            :pagination="pagination"
            :loading="loading"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="handleApprove(record)">通过</a>
              <a-divider type="vertical" />
              <a @click="handleReject(record)">拒绝</a>
            </span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab="已审核" key="2">
          <a-table
            :columns="columns"
            :dataSource="processedData"
            :pagination="pagination"
            :loading="loading"
          >
            <span slot="status" slot-scope="status">
              <a-tag :color="status === '通过' ? 'green' : 'red'">
                {{ status }}
              </a-tag>
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>

    <a-modal
      title="免修申请详情"
      :visible="modalVisible"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      width="60%"
    >
      <a-form :form="form" v-if="currentRecord">
        <a-form-item label="学生信息">
          <span>{{ currentRecord.studentName }} ({{ currentRecord.studentId }})</span>
        </a-form-item>
        <a-form-item label="申请课程">
          <span>{{ currentRecord.courseName }} ({{ currentRecord.courseCode }})</span>
        </a-form-item>
        <a-form-item label="申请理由">
          <pre>{{ currentRecord.reason }}</pre>
        </a-form-item>
        <a-form-item label="证明材料">
          <a :href="currentRecord.proof" target="_blank">查看附件</a>
        </a-form-item>
        <a-form-item label="成绩录入">
          <a-input-number
            v-decorator="['score', { initialValue: 60 }]"
            :min="60"
            :max="100"
          />
        </a-form-item>
        <a-form-item label="审核意见">
          <a-textarea
            v-decorator="['comment']"
            placeholder="请输入审核意见"
            :rows="4"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '申请编号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '学生姓名',
    dataIndex: 'studentName',
    key: 'studentName'
  },
  {
    title: '学号',
    dataIndex: 'studentId',
    key: 'studentId'
  },
  {
    title: '课程名称',
    dataIndex: 'courseName',
    key: 'courseName'
  },
  {
    title: '课程代码',
    dataIndex: 'courseCode',
    key: 'courseCode'
  },
  {
    title: '申请时间',
    dataIndex: 'applyTime',
    key: 'applyTime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const pendingData = [
  {
    id: 'EX2023001',
    studentName: '刘洋',
    studentId: '20230101',
    courseName: 'PLC与工业控制技术',
    courseCode: 'ENG101',
    applyTime: '2023-05-10',
    status: '待审核',
    reason: '已通过英语四级考试',
    proof: '/proof/20230101_ENG101.pdf'
  },
  {
    id: 'EX2023002',
    studentName: '赵宇',
    studentId: '20230102',
    courseName: '计算机基础',
    courseCode: 'CS101',
    applyTime: '2023-05-12',
    status: '待审核',
    reason: '已获得计算机二级证书',
    proof: '/proof/20230102_CS101.pdf'
  }
]

const processedData = [
  {
    id: 'EX2022001',
    studentName: '周婷',
    studentId: '20220101',
    courseName: 'PLC与工业控制技术',
    courseCode: 'MATH101',
    applyTime: '2022-05-15',
    status: '通过',
    reason: '已通过数学竞赛',
    proof: '/proof/20220101_MATH101.pdf'
  },
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      columns,
      pendingData,
      processedData,
      loading: false,
      pagination: {
        pageSize: 10
      },
      modalVisible: false,
      currentRecord: null
    }
  },
  methods: {
    handleApprove(record) {
      this.currentRecord = record
      this.modalVisible = true
    },
    handleReject(record) {
      this.$confirm({
        title: '确认拒绝申请?',
        content: '确定要拒绝这条免修申请吗?',
        onOk: () => {
          record.status = '拒绝'
          this.$message.success('申请已拒绝')
        }
      })
    },
    handleModalOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('审核结果:', values)
          this.$message.success('免修申请已处理')
          this.modalVisible = false
          this.currentRecord.status = '通过'
        }
      })
    },
    handleModalCancel() {
      this.modalVisible = false
    }
  }
}
</script>